ブラウザからPaho(MQTTクライアント)を試す

ブラウザからPaho(MQTTクライアント)を試す

Clock Icon2015.06.28

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

丹内です。

何かと話題のMQTTですが、今回はブラウザから気軽に使ってみます。

ライブラリはPahoを使います。

ブローカーには、test.mosquitto.orgを使います。

準備

公式ページのインストール方法だとmvnでビルドしてcpという一手間がかかるので、必要となるライブラリを直接コピペするのがオススメです。

このスクリプトをrailsアプリのapp/assets/javascripts/以下に置きます。

ブラウザからはMQTT3.1 over WebSocketを使うことになるので、mqttws31.jsというファイル名が良いと思います。

それと、publishするクライアントとして使うので、mosquittoをインストールしましょう。

$ brew install mosquitto

使ってみる

railsアプリを起動しブラウザでlocalhost:3000にアクセスします。

Chromeのjavascriptコンソールから、以下のように使ってみます。

client = new Paho.MQTT.Client("test.mosquitto.org", 8080, "/", "12345")
#=> P…o.M…T.Client {}_getClientId: () {...}

client.connect({onSuccess:function(){console.log("success")}, onFailure:function(){console.log("fail")}})
#=> undefined
#=> success <---- 接続に成功したら出力されます

client.subscribe('testtopic/a',{onSuccess:function(){console.log("success")}, onFailure:function(){console.log("fail")}})
#=> undefined
#=> success <---- 購読に成功したら出力されます

client.onMessageArrived = function(message){console.log(message.payloadString)}
#=> function client.onMessageArrived(message)

これで接続とsubscribeできたので、コマンドラインからpublishしてみます。

$ mosquitto_pub -h test.mosquitto.org -p 1883 -t testtopic/a -m hello -q 0 -d
Client mosqpub/38372-HL00096.l sending CONNECT
Client mosqpub/38372-HL00096.l received CONNACK
Client mosqpub/38372-HL00096.l sending PUBLISH (d0, q0, r0, m1, 'testtopic/a', ... (8 bytes))
Client mosqpub/38372-HL00096.l sending DISCONNECT

すると、ブラウザにはメッセージが表示されます。

また、接続状態を維持すると、以下のようにHeartbeatのやりとりをしていることがわかります。

スクリーンショット 2015-06-28 17.51.53

まとめ

ライブラリやMQTTの概要、MQTT over Websocketなどが分かれば、かなり簡単にMQTTを応用できそうです。

ハードウェアを強く意識したプロトコルですが、まずはブラウザから使ってみるのが手軽で良いと思います。

参考URL

JsDoc Reference - Paho.MQTT.Client Paho Javascript Client sangoの使い方 - JavaScript WebSocket 編 The Mosquitto MQTT broker gets Websockets support

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.